프론트엔드 WebHID 장치 열거: JavaScript를 사용한 연결된 장치 검색

WebHID API는 웹 애플리케이션이 일반적으로 네이티브 애플리케이션에서만 액세스할 수 있는 광범위한 HID(Human Interface Device)와 직접 통신할 수 있는 잠재력을 열어줍니다. 이는 게임 컨트롤러, 사용자 정의 입력 장치, 과학 기기 등과 같은 특수 하드웨어와 상호 작용하는 혁신적인 웹 경험을 만들 수 있는 흥미로운 가능성을 열어줍니다. 이 포괄적인 가이드는 원하는 HID 장치와의 연결을 설정하는 데 중요한 첫 번째 단계인 장치 열거의 핵심 개념을 자세히 설명합니다.

WebHID API란 무엇인가요?

WebHID API를 사용하면 웹 애플리케이션이 HID(Human Interface Device)에 액세스할 수 있습니다. 이러한 장치는 다음을 포함하는 광범위한 범주를 포함합니다.

• 게임 컨트롤러: 조이스틱, 게임 패드, 레이싱 휠
• 입력 장치: 키보드, 마우스, 트랙볼
• 산업 제어: 특수 제어판, 센서 인터페이스
• 과학 기기: 데이터 수집 장치, 측정 도구
• 맞춤형 하드웨어: 특정 목적을 위해 제작된 맞춤형 입력 장치

HID 지원이 제한적인 이전 브라우저 API와 달리 WebHID API는 HID 장치에 직접 액세스하여 개발자가 보다 풍부하고 상호 작용적인 웹 애플리케이션을 만들 수 있도록 합니다. 원격 랩에서 로봇 팔을 제어하고, 사용자 지정 입력 장치로 3D 모델을 조작하거나, 웹 기반 대시보드에서 직접 센서 데이터를 수신하는 것을 상상해 보세요.

HID 장치 열거 이해하기

HID 장치와 상호 작용하려면 웹 애플리케이션에서 사용자의 시스템에 연결된 장치를 검색해야 합니다. 이 프로세스를 장치 열거라고 합니다. WebHID API는 공급업체 ID(VID) 및 제품 ID(PID)를 기반으로 하거나 보다 광범위한 필터를 사용하여 특정 HID 장치에 대한 액세스를 요청하는 메커니즘을 제공합니다.

이 프로세스에는 일반적으로 다음과 같은 단계가 포함됩니다.

1. 장치 액세스 요청: 웹 애플리케이션은 navigator.hid.requestDevice()를 사용하여 HID 장치를 선택하라는 메시지를 사용자에게 표시합니다.
2. 장치 필터링: 사용자에게 표시되는 장치 목록을 좁히기 위해 필터를 지정할 수 있습니다. 이러한 필터는 장치의 VID 및 PID를 기반으로 합니다.
3. 장치 선택 처리: 사용자가 목록에서 장치를 선택합니다.
4. 장치 열기: 애플리케이션이 선택한 장치에 대한 연결을 엽니다.
5. 데이터 전송: 연결이 설정되면 애플리케이션이 장치에서 데이터를 보내고 받을 수 있습니다.

장치 열거에 대한 단계별 가이드

1. 필터를 사용하여 장치 액세스 요청

navigator.hid.requestDevice() 메서드는 HID 장치에 대한 액세스를 요청하기 위한 시작점입니다. 찾을 장치의 VID 및 PID를 지정하는 개체 배열인 선택적 '필터' 인수를 사용합니다.

특정 VID 및 PID가 있는 장치에 대한 액세스를 요청하는 방법의 예는 다음과 같습니다.

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // 장치의 공급업체 ID로 바꾸기
          productId: 0x5678 // 장치의 제품 ID로 바꾸기
        },
        // 필요한 경우 다른 장치에 대한 필터 추가
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // 첫 번째 선택된 장치 사용
      console.log("HID 장치 발견됨:", device);
      // 장치를 열고 통신 시작
      await openHIDDevice(device);
    } else {
      console.log("HID 장치를 선택하지 않았습니다.");
    }
  } catch (error) {
    console.error("HID 장치 요청 오류:", error);
  }
}

// 예시 사용법 (예: 버튼 클릭에 의해 트리거됨):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

중요 고려 사항:

• 공급업체 ID(VID) 및 제품 ID(PID): 이는 USB 및 Bluetooth 장치에 할당된 고유 식별자입니다. 대상 장치의 VID 및 PID는 제조업체의 설명서에서 얻거나 시스템 도구(예: Windows의 장치 관리자, macOS의 시스템 정보 또는 Linux의 'lsusb')를 사용하여 얻어야 합니다.
• 사용자 동의: requestDevice() 메서드는 브라우저에서 제어되는 권한 프롬프트를 사용자에게 표시하여 액세스를 허용할 HID 장치를 선택할 수 있도록 합니다. 이는 악의적인 웹사이트가 사용자의 동의 없이 민감한 하드웨어에 액세스하는 것을 방지하는 중요한 보안 조치입니다.
• 다중 필터: 필터 배열에 여러 필터를 포함하여 서로 다른 VID 및 PID가 있는 장치에 대한 액세스를 요청할 수 있습니다. 이는 애플리케이션이 여러 하드웨어 구성을 지원하는 경우에 유용합니다.

2. 장치 정보 얻기

사용자가 장치를 선택하면 requestDevice() 메서드가 HIDDevice 객체 배열을 반환합니다. 각 HIDDevice 객체에는 VID, PID, usagePage, usage 및 collections와 같은 장치에 대한 정보가 포함됩니다. 이 정보를 사용하여 장치를 더 자세히 식별하고 구성할 수 있습니다.

async function openHIDDevice(device) {
  try {
    await device.open();
    console.log("HID 장치 열림:", device.productName);

    // 입력 보고서 수신 대기
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`입력 보고서 ${reportId} 수신:`, uint8Array);
      // 입력 보고서 데이터 처리
    });

    device.addEventListener("disconnect", event => {
      console.log("HID 장치 연결 해제됨:", device.productName);
      // 장치 연결 해제 처리
    });

  } catch (error) {
    console.error("HID 장치 여는 중 오류:", error);
  }
}

장치 속성:

• vendorId: 장치의 공급업체 ID입니다.
• productId: 장치의 제품 ID입니다.
• productName: 제품의 사람이 읽을 수 있는 이름입니다.
• collections: 장치의 HID 컬렉션(보고서, 기능 등)을 설명하는 HIDCollectionInfo 객체 배열입니다. 이는 매우 복잡할 수 있으며 복잡한 장치에만 필요합니다.

3. 장치 연결 및 연결 해제 처리

WebHID API는 장치가 연결되거나 연결 해제될 때 애플리케이션에 알리는 이벤트를 제공합니다. navigator.hid 객체에서 connect 및 disconnect 이벤트를 수신 대기할 수 있습니다.

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID 장치 연결됨:", device);
  // 장치 연결 처리 (예: 장치 다시 열기)
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID 장치 연결 해제됨:", device);
  // 장치 연결 해제 처리 (예: 리소스 정리)
});

연결 관리에 대한 모범 사례:

• 연결 시 다시 열거: 장치가 연결되면 애플리케이션에 최신 목록이 있는지 확인하기 위해 장치를 다시 열거하는 것이 좋습니다.
• 연결 해제 시 리소스 정리: 장치가 연결 해제되면 연결된 리소스(예: 장치 연결 닫기, 이벤트 리스너 제거)를 해제합니다.
• 오류 처리: 장치가 연결되거나 예기치 않게 연결 해제되는 경우를 정상적으로 처리하기 위해 강력한 오류 처리를 구현합니다.

고급 장치 필터링 기술

기본 VID 및 PID 필터링 외에도 WebHID API는 특정 장치를 타겟팅하기 위한 고급 기술을 제공합니다. 이는 여러 인터페이스 또는 기능을 가진 장치를 처리할 때 특히 유용합니다.

1. 사용 페이지 및 사용으로 필터링

HID 장치는 장치가 제공하는 기능 유형을 정의하는 *사용 페이지* 및 *사용*으로 구성됩니다. 예를 들어 키보드는 "일반 데스크톱" 사용 페이지에 속하며 "키보드" 사용이 있습니다. 사용 페이지 및 사용을 기반으로 장치를 필터링하여 특정 장치 유형을 타겟팅할 수 있습니다.

async function requestSpecificKeyboard() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          usagePage: 0x01, // 일반 데스크톱 페이지
          usage: 0x06      // 키보드 사용
        }
      ]
    });

    // ... (장치를 처리하는 나머지 코드)
  } catch (error) {
    console.error("HID 장치 요청 오류:", error);
  }
}

사용 페이지 및 사용 값 찾기:

• HID 사용 테이블: 공식 HID 사용 테이블(USB Implementers Forum에서 게시)은 다양한 장치 유형에 대한 표준화된 사용 페이지 및 사용을 정의합니다.
• 장치 설명서: 장치 제조업체의 설명서는 해당 장치에 대한 사용 페이지 및 사용 값을 지정할 수 있습니다.
• HID 보고서 설명자: 고급 시나리오의 경우 장치의 HID 보고서 설명자를 분석하여 지원되는 사용 페이지 및 사용을 확인할 수 있습니다.

2. 여러 인터페이스 처리

일부 HID 장치는 자체 기능 집합을 갖춘 여러 인터페이스를 노출합니다. WebHID API는 각 인터페이스를 별도의 HID 장치로 처리합니다. 특정 인터페이스에 액세스하려면 VID/PID 필터링을 사용 페이지/사용 필터링과 결합하여 원하는 인터페이스를 타겟팅해야 할 수 있습니다.

실용적인 예와 사용 사례

1. 사용자 지정 게임 컨트롤러 인터페이스 구축

웹 기반 게임을 구축하고 사용자 지정 게임 컨트롤러를 지원하려는 경우를 생각해 보세요. WebHID API를 사용하여 컨트롤러의 버튼, 조이스틱 및 기타 컨트롤에서 직접 입력을 읽을 수 있습니다. 이를 통해 반응성이 뛰어나고 몰입감 있는 게임 경험을 만들 수 있습니다.

2. 웹 기반 MIDI 컨트롤러 만들기

음악가 및 오디오 엔지니어는 DAW(Digital Audio Workstation) 또는 신시사이저와 상호 작용하는 웹 기반 MIDI 컨트롤러의 이점을 누릴 수 있습니다. WebHID API를 사용하면 브라우저에서 직접 MIDI 메시지를 보내고 받을 수 있는 사용자 지정 MIDI 컨트롤러를 구축할 수 있습니다.

3. 과학 기기와의 상호 작용

연구원 및 과학자는 WebHID API를 사용하여 데이터 수집 장치, 센서 및 측정 도구와 같은 과학 기기와 연결할 수 있습니다. 이를 통해 웹 기반 대시보드 또는 분석 도구에서 직접 데이터를 수집하고 분석할 수 있습니다.

4. 접근성 애플리케이션

WebHID는 보조 기술을 만들 수 있는 기회를 제공합니다. 예를 들어, 운동 장애가 있는 사용자를 위한 특수 입력 장치는 웹 애플리케이션에 직접 통합되어 다양한 언어와 입력 방식을 통해 단일 스위치 액세스를 위한 맞춤형 버튼 배열을 제공하는 등 더욱 맞춤화되고 접근 가능한 경험을 제공할 수 있습니다.

교차 브라우저 호환성 및 보안 고려 사항

1. 브라우저 지원

WebHID API는 현재 Chromium 기반 브라우저(Chrome, Edge, Opera)에서 지원되며 다른 브라우저에서 개발 중입니다. 애플리케이션에서 WebHID API를 구현하기 전에 브라우저 호환성을 확인하고 API를 지원하지 않는 브라우저에 대한 대체 메커니즘을 제공하는 것이 중요합니다.

2. 보안 고려 사항

WebHID API는 보안을 염두에 두고 설계되었습니다. 웹 애플리케이션이 HID 장치에 액세스하도록 허용하기 전에 브라우저에서 사용자에게 권한을 요청합니다. 이는 악성 웹사이트가 사용자의 동의 없이 민감한 하드웨어에 액세스하는 것을 방지합니다. 또한 WebHID API는 브라우저의 보안 샌드박스 내에서 작동하여 애플리케이션의 시스템 리소스에 대한 액세스를 제한합니다.

• HTTPS만 해당: WebHID는 다른 강력한 웹 API와 마찬가지로 작동하려면 보안 컨텍스트(HTTPS)가 필요합니다.
• 사용자 제스처: 장치 액세스를 요청하려면 원치 않는 액세스 요청을 방지하기 위해 일반적으로 사용자 제스처(예: 버튼 클릭)가 필요합니다.
• 권한 API: 권한 API를 사용하여 WebHID 권한을 쿼리하고 관리할 수 있습니다.

일반적인 문제 해결

1. 장치를 찾을 수 없음

애플리케이션이 HID 장치를 찾을 수 없는 경우 VID 및 PID를 다시 확인하세요. 장치의 실제 식별자와 일치하는지 확인합니다. 또한 장치가 제대로 연결되어 있고 운영 체제에서 인식하는지 확인합니다.

2. 권한 거부됨

사용자가 HID 장치에 대한 액세스를 거부하면 애플리케이션이 해당 장치와 통신할 수 없습니다. 사용자에게 메시지를 표시하고 액세스가 필요한 이유를 설명하여 이 시나리오를 정상적으로 처리합니다. 사용자가 애플리케이션과 상호 작용할 수 있는 대체 방법을 제공하는 것을 고려해 보세요.

3. 데이터 형식 문제

HID 장치는 데이터를 보내고 받기 위해 사용자 지정 데이터 형식을 사용하는 경우가 많습니다. 장치의 데이터 형식을 이해하고 애플리케이션에서 적절한 구문 분석 및 직렬화 논리를 구현해야 합니다. 데이터 형식에 대한 정보는 장치 제조업체의 설명서를 참조하세요.

결론

WebHID API는 웹 개발자가 HID(Human Interface Device)와 직접 통신하는 혁신적이고 상호 작용적인 웹 애플리케이션을 만들 수 있도록 지원합니다. 장치 열거, 필터링 및 연결 관리의 원리를 이해하면 WebHID API의 모든 잠재력을 열고 매력적인 사용자 경험을 만들 수 있습니다. WebHID의 기능을 활용하여 웹을 물리적 세계와 연결하여 전 세계적으로 창의성, 생산성 및 접근성에 대한 새로운 가능성을 키우십시오.

추가 리소스

• WebHID API 사양
• Chrome 개발자용 WebHID API
• USB Implementers Forum(HID 정보)